<template>
  <div id="body">
    <el-button style="position: absolute" @click="handleBackHome">{{ "<<返回" }}</el-button>
    <div style="display: flex; justify-content: center">
      <el-card style="max-width: 1000px; flex: 1">
        <div>
          <!-- 聊天内容 -->
          <div id="chat-window" style="height: 70vh; margin-bottom: 20px">
            <el-scrollbar height="70vh">
              <div v-for="(item, index) in list" :key="item.id">
                <div
                  :style="{ display: 'flex', position: 'relative', left: `${index % 2 ? '80%' : '0'}`, width: '40%' }">
                  <div v-show="!(index % 2)">
                    <el-avatar :src="circleUrl" :icon="UserFilled" style="width: 60px; height: 60px" />
                  </div>
                  <el-card style="width: auto; margin: 0 10px">
                    {{ item.content }}
                  </el-card>
                  <div v-show="index % 2">
                    <el-avatar
                      :src="userUrl"
                      :icon="UserFilled"
                      style="width: 60px; height: 60px; margin-right: 30px" />
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <!-- 输入框 -->
          <el-card style="height: 20vh; padding: 5px">
            <div>
              <el-button round size="small">
                选插件
                <el-icon class="el-icon--right"><Upload /></el-icon>
              </el-button>
              <el-tooltip class="box-item" effect="dark" content="上传图片" placement="top-start">
                <el-button size="small" type="primary" :icon="Edit" circle />
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" content="固定格式" placement="top-start">
                <el-button size="small" type="success" :icon="Check" circle />
              </el-tooltip>
            </div>

            <div style="margin: 10px; position: relative">
              <textarea
                v-model="userInput.spoken"
                class="txt"
                style="border: none"
                cols="120"
                placeholder="请输入你的内容"
                rows="5"></textarea>
              <el-button style="position: absolute; right: 0; bottom: -40%" @click="handleSend">发送</el-button>
            </div>
            <div></div>
          </el-card>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { Check, Edit } from "@element-plus/icons-vue";
import { handleSend as handleSendApi } from "@/api/chat/index.js";
import { reactive } from "vue";
import to from "await-to-js";
import { ElMessage } from "element-plus";
import { isAllSpaces } from "../../utils/commonTool";

const circleUrl = "https://pic1.zhimg.com/v2-6526db4866fa1aa6953604796fdcbb64_b.jpg";
const userUrl = "https://pic1.zhimg.com/80/v2-27d622eb809ae85e6e96f166ce7fb39a_720w.webp?source=2c26e567";
// 接收数据
const router = useRoute();
// 跳转
const Router = useRouter();
const list = reactive([
  {
    id: "001",
    content: "你好我的朋友！！",
  },
]);
const userInput = reactive({
  appid: "60acb157017f4bc29b4fb74294091fd4",
  userid: "24324341",
  spoken: "",
});
// 发送按钮
const handleSend = async () => {
  console.log(userInput.spoken);
  if (userInput.spoken.length && !isAllSpaces(userInput.spoken)) {
    list.push({
      id: 12,
      content: userInput.spoken,
    });
    const [err, res] = await to(handleSendApi(userInput));
    if (!err) {
      list.push({
        id: 12,
        content: res.info.text,
      });
      userInput.spoken = "";
    } else {
      list.pop();
    }
  } else {
    ElMessage({
      message: "请输入后再发送",
      type: "warning",
    });
  }
};

// 返回主页
const handleBackHome = () => {
  Router.push({ path: "/" });
};
</script>

<style scoped>
.txt {
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  font-family: "Arial";
  font-weight: 400;
}

#body {
  /* 设置段落的最小高度： */
  min-height: 100vh;
  /* linear-gradient:创造渐变效果 */
  background-image: linear-gradient(120deg, white, cornflowerblue, #fffcdc);
}

#chat-window {
  /* 设置背景图片和透明度 */
  background-image: url("../../assets/background_chat.png"); /* 替换路径为你的本地图片路径 */
  background-color: rgba(255, 255, 255, 0.5); /* 设置背景颜色为白色，透明度为 0.5 */
  background-size: 850px 700px; /* 让背景图片自适应填充整个 #chat-window 区域 */
  background-position: center;
}

/* 修改发送消息气泡的背景色 */
#chat-window .el-card {
  background-color: cornflowerblue; /* 将背景色修改为蓝色 */
  width: 200px;
}
</style>
